<template>
    <!-- 查看已签订合同 -->
    <div class="subcontractList padding-page ps-a workers">
        <div class="body_header">
            <el-tag class="list">项目: {{projectName}}</el-tag>
        </div>

        <el-row type="flex" class="m-t-20">
            <div>
                工人
                <el-input style="width: 200px" placeholder="请输入工人名称" v-model="search.name"></el-input>
            </div>
            <el-button class="m-l-20"@click="init()">搜索</el-button>
        </el-row>

        <el-table :data="tableData" class="m-t-20" style="width: 100%" height="65%">
            <el-table-column
                prop="workerName"
                label="姓名">
            </el-table-column>
            <el-table-column
                prop="subContractorName"
                label="班组">
            </el-table-column>
            <el-table-column
                prop="contractTotal"
                label="已签合同数">
            </el-table-column>
            <el-table-column
                label="合同列表">
                <template slot-scope="scope">
                    <el-button type="text" @click="contractList(scope.row)">查看合同列表</el-button>
                </template>
            </el-table-column>
        </el-table>

        <div class="m-t-20 ta-c tt-a">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[10, 20, 30, 40]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total">
            </el-pagination>
        </div>

        <router-view />
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {
    QueryGroupWorkerList
} from '@/api/contract/workers'
export default {
    computed: {
        ...mapGetters([
            'userId',
            'currId',
            'roleId'
        ])
    },
    data() {
        return {
            tableData: [],
            search: {
                name: '',
            },
            multipleSelection : [],  // 存放表格多选数据
            currentPage: 1,   // 当前页
            pageSize: 10,     //每页多少条
            total: 0,          // 总数量
            projectId: ''
        }
    },
    methods: {
        // 表格多选触发
        handleSelectionChange(val) {
            // console.log(val);
            this.multipleSelection = val;
        },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
        },
        // // 查看历史合同
        // historyList() {
        //     console.log('查看历史合同');
        //     this.$router.push({ name: 'workersHistoryList' });
        // },
        // 查看合同列表
        contractList(row) {
            const {originatorName, contractTotal, partyBId, workerName, contractId} = row
            const { projectId, projectName, subcontractId} = this.$route.query
            let data = {
                projectName,
                projectId,
                workerName: workerName, //工人
                contractTotal, //已签合同数量
                partyBId: partyBId, //签订方Id
                subcontractId: subcontractId ,//经理Id,
            }
            this.$router.push({ name: 'workersContractList', query: data });
        },
        init() {
            const { projectId, subcontractId} = this.$route.query
            const data = {
                userId: this.userId,
                roleId: this.roleId,
                currId: this.currId,
                projectId,
                subContractorId: subcontractId,
                workerName: this.search.name,
                pageFlag: 1,         //是否启用分页
                currentPage: this.currentPage,      //当前页
                queryNumber: this.pageSize ,
				contractStatus:3
            }
            QueryGroupWorkerList(data).then(res => {
                console.log(res, '工人合同列表')
                if(res.code == '0') {
                    this.tableData = res.data.result
                    this.total = res.data.resultTotal
                }
            })
        },
    },
    created() {
        this.projectName = this.$route.query.projectName
        this.init()
    }
}
</script>
<style lang="scss">
    .subcontractList {
        background: #fff;
        z-index: 12;
    }
    .body_header {
        display: flex;
        padding-bottom: 10px;
        border-bottom: 1px solid #d8dce5;
        .list {
            min-width: 200px;
            height: 50px;
            line-height: 50px;
            margin-right: 50px;
            font-size: 18px;
        }
    }
    .pagination {
        width: 100%;
    }
</style>